<script>
import { GlFormTextarea } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';

export default {
  components: {
    GlFormTextarea,
    MarkdownField,
  },
  inject: ['markdownDocsPath', 'markdownPreviewPath'],
  props: {
    isSubmitting: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      solution: '',
    };
  },
  methods: {
    emitChanges() {
      this.$emit('change', { solution: this.solution });
    },
  },
  i18n: {
    title: __('Solution'),
    description: s__(
      'VulnerabilityManagement|(optional) Include the solution to the vulnerability if available.',
    ),
  },
  restrictedToolBarItems: ['attach-file'],
};
</script>
<template>
  <section>
    <header class="gl-pt-4 gl-mt-6 gl-mb-3 gl-border-t-gray-100 gl-border-t-solid gl-border-t-1">
      <h3 class="gl-mt-0">
        {{ $options.i18n.title }}
      </h3>
    </header>
    <div class="gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base">
      <markdown-field
        ref="markdownField"
        class="gl-px-4"
        :can-attach-file="false"
        :add-spacing-classes="false"
        :markdown-preview-path="markdownPreviewPath"
        :markdown-docs-path="markdownDocsPath"
        :restricted-tool-bar-items="$options.restrictedToolBarItems"
        :textarea-value="solution"
        :is-submitting="isSubmitting"
      >
        <template #textarea>
          <gl-form-textarea
            id="form-solution"
            v-model="solution"
            rows="8"
            class="gl-shadow-none! gl-px-0! gl-py-4! gl-h-auto!"
            :aria-label="$options.i18n.description"
            :placeholder="$options.i18n.description"
            @change="emitChanges"
          />
        </template>
      </markdown-field>
    </div>
  </section>
</template>
